<template>
  <div class="ring-indicator-3d">
    <div class="container">
      <div class="component-3d" style="">
        <div class="component-3d-inner" style="">
          <div
            v-for="(item, index) in internalIndicators"
            :key="index"
            class="indicator-item"
            draggable="false"
            :style="{ transform: item.transform }"
            @click="selectIndicator(index)"
            @mouseenter="stopAutoplay"
            @mouseleave="startAutoplay"
          >
            <div class="indicator-wrapper" :class="{ selected: item.selected }">
              <div class="indicator-bg" :class="{ selected: item.selected }">
                <div v-if="item.selected" class="indicator-icon"></div>
                <div
                  class="indicator-value"
                  :class="{ selected: item.selected }"
                >
                  <span>{{ item.value }}</span>
                </div>
                <div
                  class="indicator-label"
                  :class="{ selected: item.selected }"
                >
                  <span>{{ item.label }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RingIndicator3D",
  props: {
    indicators: {
      type: Array,
      required: true,
      default: () => [],
    },
    autoplayInterval: {
      type: Number,
      default: 3000,
    },
  },
  data() {
    return {
      currentIndex: 0,
      autoplayTimer: null,
      transformArr: [
        "translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 700, 1)",
        "translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 665.74, 0, 216.312, 1)",
        "translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 411.45, 0, -566.312, 1)",
        "translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -411.45, 0, -566.312, 1)",
        "translate(-50%, -50%) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -665.74, 0, 216.312, 1)",
      ],
      internalIndicators: [],
    };
  },
  watch: {
    indicators: {
      handler(newVal) {
        this.initIndicators();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.startAutoplay();
  },
  beforeDestroy() {
    this.stopAutoplay();
  },
  methods: {
    initIndicators() {
      // 初始化内部数据，确保每个indicator都有selected和transform属性
      this.internalIndicators = this.indicators.map((item, index) => ({
        ...item,
        selected: index === 0,
        transform: this.transformArr[index],
      }));
      this.currentIndex = 0;
    },
    selectIndicator(index) {
      this.currentIndex = index;
      this.updateSelected();
      this.resetAutoplay();
      this.$emit("select", this.internalIndicators[index], index);
    },
    updateSelected() {
      // 找到当前选中的指标
      const selectedItem = this.internalIndicators[this.currentIndex];

      // 重新排序：选中的放第一位，原来在它前面的元素移到末尾
      const beforeItems = this.internalIndicators.slice(0, this.currentIndex);
      const afterItems = this.internalIndicators.slice(this.currentIndex + 1);
      this.internalIndicators = [selectedItem, ...afterItems, ...beforeItems];

      // 使用 nextTick 确保 DOM 更新后再应用 transform，这样可以触发过渡动画
      this.$nextTick(() => {
        // 更新选中状态和transform
        this.internalIndicators.forEach((item, i) => {
          item.selected = i === 0;
          item.transform = this.transformArr[i];
        });
      });

      // 重置currentIndex为0（因为选中项已移到第一位）
      this.currentIndex = 0;
    },
    nextIndicator() {
      // 切换到下一个指标（当前在index 0，所以下一个是index 1）
      const nextIndex = 1;
      this.selectIndicator(nextIndex);
    },
    startAutoplay() {
      if (this.autoplayInterval > 0) {
        this.autoplayTimer = setInterval(() => {
          this.nextIndicator();
        }, this.autoplayInterval);
      }
    },
    stopAutoplay() {
      if (this.autoplayTimer) {
        clearInterval(this.autoplayTimer);
        this.autoplayTimer = null;
      }
    },
    resetAutoplay() {
      this.stopAutoplay();
      this.startAutoplay();
    },
  },
};
</script>

<style scoped>
.ring-indicator-3d {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.component-3d {
  overflow: visible;
  perspective: 600px;
  width: 100%;
  height: 100%;
}

.component-3d-inner {
  transform-style: preserve-3d;
  pointer-events: none;
  transform: translateZ(342.818px)
    matrix3d(
      1,
      0,
      0,
      0,
      0,
      -0.970143,
      0.242536,
      0,
      0,
      0.242536,
      0.970143,
      0,
      0,
      0,
      -2061.55,
      1
    )
    translate(50%, 50%);
}

.indicator-item {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator-wrapper {
  cursor: pointer;
  transform: scale(1) translate(0px, 0px);
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator-bg {
  width: 240px;
  height: 240px;
  background: url("https://assets.easyv.cloud/components/static-image/ringIndicator3d/default-bg.png")
    50% 50% / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: auto;
  align-items: center;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation: float 3s ease-in-out infinite;
}

.indicator-bg.selected {
  background: url("https://assets.easyv.cloud/components/static-image/ringIndicator3d/select-bg.png")
    50% 50% / 100% 100% no-repeat;
}

.indicator-icon {
  width: 85px;
  height: 85px;
  position: absolute;
  transform: translate(0px, 0px);
  background: url("blob:https://workspace.easyv.cloud/ae3ab6ca-8d55-48e9-8a1f-71f478342daa")
    50% 50% / 100% 100% no-repeat;
}

.indicator-value {
  font-family: manrope-bold;
  font-size: 48px;
  font-style: normal;
  font-weight: normal;
  color: rgb(88, 176, 251);
  transform: translate(0px, -20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator-value.selected {
  color: rgb(0, 237, 255);
  transform: translate(0px, -75px);
}

.indicator-label {
  font-family: 微软雅黑;
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  color: rgb(230, 247, 255);
  transform: translate(0px, 0px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator-label.selected {
  transform: translate(0px, 120px);
}

.indicator-wrapper.selected {
  transform: scale(1.5) translate(0px, -20px);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(0, 237, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 237, 255, 0.8));
  }
}

.indicator-wrapper:not(.selected):hover {
  transform: scale(1.1) translate(0px, -5px);
}

.indicator-wrapper:not(.selected):hover .indicator-value {
  color: rgb(0, 200, 255);
}

.indicator-wrapper.selected {
  animation: pulse 2s ease-in-out infinite;
}

.indicator-wrapper.selected .indicator-bg {
  animation: glow 2s ease-in-out infinite;
}

.indicator-wrapper.selected .indicator-value {
  animation: float 3s ease-in-out infinite;
}
</style>
